<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆配对游戏</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Arial', sans-serif;
        }

        .game-container {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .game-header {
            margin-bottom: 20px;
            text-align: center;
        }

        .game-stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            background-color: #f1f1f1;
            padding: 10px;
            border-radius: 5px;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            perspective: 1000px;
        }

        .card {
            height: 120px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.5s;
            cursor: pointer;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
        }

        .card-front {
            background-color: #0d6efd;
            color: white;
            font-size: 24px;
            transform: rotateY(180deg);
        }

        .card-back {
            background-color: #6c757d;
            color: white;
            font-size: 36px;
        }

        .card.flipped {
            transform: rotateY(180deg);
        }

        .card.matched {
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s 0.5s, opacity 0.5s linear;
        }

        .modal-content {
            border-radius: 10px;
        }

        .progress {
            height: 10px;
            margin-top: 10px;
        }

        @media (max-width: 576px) {
            .game-board {
                grid-template-columns: repeat(3, 1fr);
            }

            .card {
                height: 90px;
            }
        }
    </style>
</head>

<body>
    <div class="container game-container">
        <div class="game-header">
            <h1 class="text-primary">记忆配对游戏</h1>
            <p class="lead">翻开卡片，找到所有匹配的对子！</p>
        </div>

        <div class="game-stats">
            <div>
                <h5>时间</h5>
                <div id="timer">00:00</div>
            </div>
            <div>
                <h5>步数</h5>
                <div id="moves">0</div>
            </div>
            <div>
                <h5>剩余</h5>
                <div id="pairs-left">8</div>
            </div>
        </div>

        <div class="progress">
            <div id="progress-bar" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
        </div>

        <div class="game-board" id="game-board">
            <!-- 卡片将通过JavaScript动态生成 -->
        </div>

        <div class="text-center mt-4">
            <button id="restart-btn" class="btn btn-danger">重新开始</button>
        </div>
    </div>

    <!-- 游戏结束模态框 -->
    <div class="modal fade" id="gameOverModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">恭喜你！</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <h4>你完成了游戏！</h4>
                    <p>用时: <span id="final-time"></span></p>
                    <p>总步数: <span id="final-moves"></span></p>
                    <p>准确率: <span id="final-accuracy"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="play-again-btn" type="button" class="btn btn-primary">再玩一次</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery和Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <noscript>
        <style>
            body {
                display: none !important;
            }
        </style>
        <meta http-equiv="refresh" content="0; url=about:blank">
    </noscript>
    <script src="security.js"></script>
    <script>
        $(document).ready(function () {
            // 游戏变量
            let cards = [];
            let flippedCards = [];
            let moves = 0;
            let matchedPairs = 0;
            let timerInterval;
            let seconds = 0;
            const totalPairs = 8;
            let canFlip = true;

            // 图标库 (Font Awesome 图标)
            const icons = [
                'fa-heart', 'fa-star', 'fa-car', 'fa-bell',
                'fa-flag', 'fa-key', 'fa-gift', 'fa-camera'
            ];

            // 初始化游戏
            initGame();

            // 初始化游戏函数
            function initGame() {
                // 重置游戏状态
                $('#game-board').empty();
                flippedCards = [];
                moves = 0;
                matchedPairs = 0;
                seconds = 0;
                clearInterval(timerInterval);
                updateStats();
                canFlip = true;

                // 创建卡片对
                let cardDeck = [];
                for (let i = 0; i < totalPairs; i++) {
                    cardDeck.push(i);
                    cardDeck.push(i);
                }

                // 洗牌
                cardDeck = shuffleArray(cardDeck);

                // 创建卡片元素
                cards = [];
                cardDeck.forEach((value, index) => {
                    const card = $(`
                        <div class="card" data-value="${value}">
                            <div class="card-face card-back">
                                <i class="fas fa-question"></i>
                            </div>
                            <div class="card-face card-front">
                                <i class="fas ${icons[value]}"></i>
                            </div>
                        </div>
                    `);

                    card.click(function () {
                        if (!canFlip || $(this).hasClass('flipped') || flippedCards.length >= 2) return;

                        flipCard($(this));
                    });

                    $('#game-board').append(card);
                    cards.push(card);
                });

                // 开始计时
                timerInterval = setInterval(updateTimer, 1000);
            }

            // 洗牌函数
            function shuffleArray(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
                return array;
            }

            // 翻转卡片函数
            function flipCard(card) {
                card.addClass('flipped');
                flippedCards.push(card);

                if (flippedCards.length === 2) {
                    canFlip = false;
                    moves++;
                    updateStats();

                    // 检查是否匹配
                    if (flippedCards[0].data('value') === flippedCards[1].data('value')) {
                        // 匹配成功
                        matchedPairs++;
                        updateStats();

                        // 更新进度条
                        const progress = (matchedPairs / totalPairs) * 100;
                        $('#progress-bar').css('width', progress + '%');

                        // 标记为已匹配
                        setTimeout(() => {
                            flippedCards.forEach(card => {
                                card.addClass('matched');
                            });
                            flippedCards = [];
                            canFlip = true;

                            // 检查游戏是否结束
                            if (matchedPairs === totalPairs) {
                                endGame();
                            }
                        }, 500);
                    } else {
                        // 不匹配，翻回去
                        setTimeout(() => {
                            flippedCards.forEach(card => {
                                card.removeClass('flipped');
                            });
                            flippedCards = [];
                            canFlip = true;
                        }, 1000);
                    }
                }
            }

            // 更新游戏统计信息
            function updateStats() {
                $('#moves').text(moves);
                $('#pairs-left').text(totalPairs - matchedPairs);
            }

            // 更新计时器
            function updateTimer() {
                seconds++;
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = seconds % 60;
                $('#timer').text(
                    (minutes < 10 ? '0' : '') + minutes + ':' +
                    (remainingSeconds < 10 ? '0' : '') + remainingSeconds
                );
            }

            // 游戏结束
            function endGame() {
                clearInterval(timerInterval);

                // 计算准确率
                const accuracy = Math.round((totalPairs / moves) * 100) || 0;

                // 显示结果
                $('#final-time').text($('#timer').text());
                $('#final-moves').text(moves);
                $('#final-accuracy').text(accuracy + '%');

                // 显示模态框
                const gameOverModal = new bootstrap.Modal(document.getElementById('gameOverModal'));
                gameOverModal.show();
            }

            // 重新开始游戏
            $('#restart-btn, #play-again-btn').click(function () {
                initGame();
                $('#gameOverModal').modal('hide');
            });

            // 加载Font Awesome
            $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">');
        });
    </script>
</body>

</html>